<template>
  <div class="mine-collect">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="我的收藏"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <van-icon :badge="collectCount" name="star" size="20" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 内容主体 -->
    <div class="mine-contanier">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <van-cell v-for="(item, index) in collectionList" :key="index">
          <van-swipe-cell>
            <van-card
              :num="item.num"
              :price="item.price"
              desc="描述信息"
              :title="item.name"
              class="goods-card"
              :origin-price="item.oldPrice"
              :thumb="item.url"
            >
            </van-card>

            <template #right>
              <van-button
                square
                text="取消收藏"
                type="danger"
                class="delete-button"
                @click="deleteCollection(item.id)"
              />
            </template>
          </van-swipe-cell>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      loading: false,
      finished: false,
    };
  },
  computed: {
    ...mapGetters(["collectionList"]),
    collectCount() {
      let collectionList = this.$store.getters.collectionList;
      let count = collectionList.length;
      return count;
    },
  },
  methods: {
    ...mapActions(["deleteCollection"]),
    onLoad() {
      this.finished = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$toast("跳转到购物车");
      this.$router.push({ path: "/cart" });
    },
  },
};
</script>
<style lang="scss" scoped>
.mine-collect {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //   主体内容
  .mine-contanier {
    flex-grow: 1;
    overflow: auto;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-card{
  margin-bottom: 10px;
}
</style>
